<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">


			<view>
				<view style="line-height: 60rpx; width:750rpx;height:60rpx;background:rgba(255,255,255,1);margin-top: 2rpx;font-size:32rpx;font-weight:400;color:rgba(51,51,51,1);">
					<text style="margin-left: 25rpx;">计划截止日期：{{end_time}}</text>
				</view>
				<view style="line-height: 60rpx; width:750rpx;height:60rpx;background:rgba(255,255,255,1);margin-top: 2rpx;font-size:32rpx;font-weight:400;color:rgba(51,51,51,1);">
					<text style="margin-left: 25rpx;">还款总金额：{{bill_money}}元</text>
				</view>
				<view style="line-height: 60rpx; width:750rpx;height:60rpx;background:rgba(255,255,255,1);margin-top: 2rpx;font-size:32rpx;font-weight:400;color:rgba(51,51,51,1);">
					<text style="margin-left: 25rpx;">启动金额：{{rp_price}}元</text>
				</view>
				<view style="line-height: 60rpx; width:750rpx;height:60rpx;background:rgba(255,255,255,1);margin-top: 2rpx;font-size:32rpx;font-weight:400;color:rgba(51,51,51,1);">
					<text style="margin-left: 25rpx;">还款笔数：{{num}}笔</text>
				</view>
				<!-- <view style="line-height: 60rpx; width:750rpx;height:60rpx;background:rgba(255,255,255,1);margin-top: 2rpx;font-size:32rpx;font-weight:400;color:rgba(51,51,51,1);">
					<text style="margin-left: 25rpx;">周转金手续费：{{zhouzhuanshouxu}}元</text>
				</view> -->
				<view style="line-height: 60rpx; width:750rpx;height:60rpx;background:rgba(255,255,255,1);margin-top: 2rpx;font-size:32rpx;font-weight:400;color:rgba(51,51,51,1);">
					<!-- <text style="margin-left: 25rpx; font-size:32rpx;font-weight:bold;color:rgba(51,51,51,1);">还款手续费：{{poundage}}元</text> -->
					<text  style="font-size:32rpx;font-weight:bold;margin-left: 25rpx;">已使用优惠券：{{ coupon }}元</text>
				</view>
			</view>

			<view class="grace-rows" style="margin: 10rpx 0; line-height: 90rpx; width:750rpx;height:90rpx;background:rgba(255,255,255,1);">
				<view style="margin-left: 25rpx; font-size:32rpx;font-weight:400;color:rgba(79,159,254,1);">计划详情</view>
				<view style="margin: 0 20rpx; font-size: 30rpx; color:rgba(36,159,230,1);">|</view>
				<view style="font-size: 32rpx; color:#FF6600;">P</view>
				<view style="font-size: 32rpx; color:#4F9FFE;">lan</view>
				<view style="margin-left: 20rpx; font-size: 32rpx; color:#FF6600;">D</view>
				<view style="font-size: 32rpx; color:#4F9FFE;">etails</view>
			</view>
			
			<view v-for="(item1,index1) in child" :key="index1" class="grace-rows" style="margin-top: 4rpx; width:750rpx;height:100rpx;"
			 :style="{background:item1.types==='代还还款'?'rgba(255,235,218,1)':'rgba(255,255,255,1)'}">
				<!-- 状态 -->
				<view style=" margin: auto 20rpx; ">
					<view class="grace-columns">
						<image class="" :src="item1.types==='代还支付'?'../../static/weixiaofei.png':'../../static/lanhuankuan.png'" style="width: 66rpx;height: 46rpx;"></image>
						<text style="font-size:22rpx;font-weight:400;" :style="{color:item1.types==='代还还款'?'rgba(129,185,255,1)':'rgba(153,153,153,1)'}">未确认</text>
					</view>
				</view>

				<!-- 信息 -->
				<view class="grace-columns">
					<view class="grace-space-between" style="margin-top: 5rpx;">
						<text style="font-size:28rpx;font-weight:400;color:rgba(51,51,51,1);">金额：￥{{item1.money}}</text>
						<text v-show="item1.types!='代还还款'" style="font-size:22rpx;font-weight:400;color:rgba(153,153,153,1);">类型：{{ item1.mer_type }}</text>
					</view>
					<view style="margin-top: 8rpx; width:580rpx;height:1rpx;background:rgba(204,204,204,1);"></view>
					<view class="grace-space-between" style="margin-top: 8rpx;">
						<text v-show="item1.types!='代还还款'&&is_coupon!=1"  style="font-size:22rpx;font-weight:400;color:rgba(102,102,102,1);">手续费：￥{{ item1.procedures }}</text>
						<text style="font-size:22rpx;font-weight:400;color:rgba(51,51,51,1);">{{ item1.estimate_time.substring(0,10) }}</text>
						<view>
							<text style="font-size:22rpx;font-weight:400;color:rgba(153,153,153,1);">{{ item1.estimate_time.substring(10,21) }}</text>
							<!-- <image src="../../static/bianji.png" style="width: 30rpx;height: 30rpx;"></image> -->
						</view>
					</view>
				</view>
			</view>
			<!-- </view> -->
			<view style="height:110rpx;"></view>
			<view class="grace-rows" style="position: fixed;bottom: 0;">
				<view @tap="again" :style="{background:button_color}" class="button_color">重新生成</view>
				<view @tap="sumbit" style="width:380rpx;height:110rpx;background:#37a6ff;font-size:30rpx;font-weight:400;color:rgba(255,255,255,1);line-height: 110rpx;text-align: center;">确认计划</view>
			</view>

			<!-- 鉴权 -->
			<graceDialog :isTitle="false" :show="show3" :isCloseBtn="false" width='500rpx'>
				<view class="content2" slot="content" style="text-align: center;">
					<text style="font-size: 26rpx;">验证码已发送至您</text></br>
					<text style="font-size: 24rpx;">尾号{{ yuliushouji }}的手机</text>
					<input @input="jianquanjianzhenma" style="margin-top: 20rpx; height: 80rpx; border-bottom:#B2B2B2 solid 2rpx"
					 placeholder="请输入验证码" />
				</view>
				<view slot="btns" class="grace-space-between">
					<text class="grace-dialog-buttons" @tap="closeDialog3">关闭</text>
					<text class="grace-dialog-buttons grace-blue" @tap="confirm3">确认</text>
				</view>
			</graceDialog>
			<!-- 鉴权 -->
			<ourLoading  active text="加载中..." v-if="loadings" />

		</view>
	</gracePage>
</template>

<script>
	import graceDialog from '../../graceUI/components/graceDialog.vue';
	import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				key: '', // 生成预览返回的key
				child: [], //子订单
				plan_id: '',
				bank_id: "", //信用卡id
				start_time: '2020-1-1',
				bill_money: "0", //账单金额
				rp_price: "0", //建议留卡金额
				end_time: "2020-01-1", //结束时间
				num: "0", //笔数
				poundage: 1, //手续费
				zhouzhuanshouxu: '暂无', //周转金手续费
				// 鉴权
				show3: false,
				yijianquan: 0,
				yanzhengma: '', //验证码
				yuliushouji: '', //预留手机
				is_coupon: 0, //是否使用优惠券
				coupon: 0, //抵扣券金额
				is_bool: false,
				types: '',
				jianquans: {
					yuliushouji: '',
					order_num: '', //订单号
					sms_code: ''
				},
				loadings: false
			}
		},
		onLoad:function(opt){
			this.key = opt.key
			this.coupon = opt.coupons
		},
		onShow: function() {
			this.button_color = uni.getStorageSync('button_color');
			var vm = this;
			vm.myPost(
				'api/agentrepayment/get_generation_plan', {
					key:vm.key
				},
				function(res) {
					console.log(res);
					if(res.code == 200){
						vm.bill_money = res.data.bill_money;
						vm.rp_price = res.data.rp_price;
						vm.end_time = res.data.end_time;
						vm.num = res.data.num;
						vm.child = res.data.child;
						vm.bank_id = res.data.card_id;
					}
					
					// vm.poundage = res.data.poundage;
					
					// vm.start_time = res.data.start_time;
					// vm.plan_id = res.data.id;
					// vm.zhouzhuanshouxu = res.data.revolving_fund;
					// vm.is_coupon = res.data.is_coupon;
					// vm.coupon = res.data.coupon;
					// vm.types = res.data.types

				}
			)
		},
		// onUnload(){		
		// 	uni.navigateBack({
		// 	    delta: 2
		// 	});
		// 	},
		components: {
			gracePage,
			graceDialog
		},
		methods: {
			// 鉴权
			jianquan() {
				var vm = this;
				vm.loadings = true
				vm.myPost(
					'api/mypassageway/open_the_channel', {
						card_id: vm.bank_id,
					},
					function(res) {
						vm.loadings = false
						console.log(res.data)
						var data = res.data;
						if(data.verification||data.verification ==0){
							var is_need_SMS = res.data.verification;
							if (is_need_SMS == 1) {
								vm.jianquans.order_num = res.data.order_num;
								vm.jianquans.yuliushouji = res.data.phone;
								vm.showDialog3()
							} else if (is_need_SMS == 2) {
								uni.setStorageSync('plan_id',vm.plan_id);
								uni.setStorageSync('web_url',res.data.url);
								uni.redirectTo({
									url: '/pages/Repayment/kaitong_quxiangqing'
								})
							}else{
								uni.redirectTo({
									url:'/pages/Repayment/huankuan'
								})
							}
						}else{
							setTimeout(function(){
								uni.redirectTo({
									url:'/pages/Repayment/huankuan'
								})
							},1000)
						}
					}
				)
			
			},
			// 重新生成计划
			again(){
				uni.redirectTo({
					url:'/pages/Repayment/huankuan'
				})
			},
			// 确认生成计划事件
			sumbit: function() {
				var that = this;
				that.loadings = true
				var url =  'api/agentrepayment/confim_plan';
				that.myPost(url, {
					key: that.plan_id
				}, function(res) {
					that.loadings = false
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						that.jianquan();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			//鉴权验证码输入
			jianquanjianzhenma(res) {
				var value = res.detail.value;
				this.jianquans.sms_code = value;
			},
			// 显示验证码输入框
			showDialog3: function() {
				this.show3 = true;
			},
			// 关闭输入框
			closeDialog3: function() {
				this.show3 = false;
			},
			// 验证码输入框选择了确认
			confirm3: function() {
				if (this.yanzhengma === '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
				} else {
					var vm = this;
					vm.loadings = true
					this.myPost(
						'api/mypassageway/confirm_open_channel', {
							bind_num: vm.jianquans.order_num,
							cms: vm.jianquans.yanzhengma,
						},
						function(res) {
							vm.loadings = false
							vm.closeDialog3();
							if(res.code == 200){
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								setTimeout(function() {
									uni.redirectTo({
										url:'/pages/Repayment/huankuan'
									})
								}, 1000);
							}
							// vm.sumbit();
							
						}
					)
				}

			},
			Gotos() {
				var url = '/pages/generation_plan/generation_plan?card_id=' + this.card_id;

			}
		}
	}
</script>

<style>
	.button_color{
		width:380rpx;height:110rpx;background:#3187D5;font-size:30rpx;font-weight:400;color:rgba(255,255,255,1);line-height: 110rpx;text-align: center;
	}
	.content2 {
		padding: 30rpx;
		line-height: 50rpx;
	}

	.grace-dialog-buttons {
		width: 700rpx;
		line-height: 88rpx;
		height: 88rpx;
		display: block;
		overflow: hidden;
		text-align: center;
		font-size: 26rpx;
		color: #999999;
	}
</style>
